<!-- 用户编辑模态框 -->
<style>
    .functionContent {
        width: 100%;
        padding: 20px;
    }

    .data-list ul {
        list-style: none;
        zoom: 1;
        padding-left: 0px;
    }

    .data-list ul li {
        list-style-type: none;
        float: left;
        border: 1px solid #CFCFCF;
        padding: 10px;
        width: 150px;
        margin-right: 10px;
        margin-top: 10px;
        text-align: center;
    }

    .data-list ul li.selected {
        background-color: #00a7d0;
        color: #FFFFFF;
    }
    .data-list ul li.selected:hover {
        background-color: #0086b1;
        color: #FFFFFF;
    }
    .data-list ul li:hover {
        background-color: #cacaca;
        color: #FFFFFF;
    }


    /*.data-list ul li a{*/
    /*line-height: 30px;*/
    /*padding: 10px;*/
    /*text-align: center;*/
    /*}*/
    /*.data-list ul li a:hover{*/
    /*background-color: #d9d9d9;*/
    /*}*/
</style>
<form class="form-horizontal" method="post" name="form_menu_funcs" id="form_menu_funcs"
      action="${request.contextPath}/soa/menu/datas/updateFuncs">
    <input type="hidden" id="id" name="id" value="${menu.id!}">
    <input type="hidden" id="funcIds" name="funcIds" value="${menu.funcIds!}">
</form>
<div class="functionContent" id="functionContent">
    <div class="msg">
        单击选择或者取消功能,最后点击确定保存选好的功能
    </div>
    <div class="data-list">
        <ul>
            <#list funcList as func>
                <li data_value="${func.id}" data_name="${func.funcName}">${func.funcName}
                </li>
            </#list>
            <div style="clear: both;"></div>
        </ul>
    </div>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        var funcs = $("#funcIds").val();
        var functions = new Array();
        if(funcs!=null && funcs!=""){
            functions=funcs.split(",");
        }
        console.log(functions.length);
        $("#functionContent li").each(function(){
            var funcId = $(this).attr("data_value");
            if($.inArray(funcId, functions)!=-1){
                $(this).addClass("selected");
            }
        });
        $("#functionContent li").on("click", function () {
            if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
                var funcId = $(this).attr("data_value");
                functions.splice($.inArray(funcId, functions), 1);
            }
            else {
                $(this).addClass("selected");
                var funcId = $(this).attr("data_value");
                functions.push(funcId);
            }
            funcs=functions.join(",");
            console.log(funcs);
            $("#funcIds").val(funcs);
        });
    });
</script>
